<!DOCTYPE html>
<html>
<head>
    <title>AI无纸化会议系统</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" href="">
    <link rel="stylesheet" href="css/css1.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="js/resize.js"></script>
    <script src="js/jq.js"></script>
</head>
<body>
<div id="page">
    <header>
        <h1>AI无纸化会议系统</h1>
        <time>
            <p class="Time">00:00:00</p>
            <span class="Date">0000年00月00日 星期_</span>
        </time>
    </header>

    <section>
        <div id="home" class="animated fadeOutLeft">
            <div class="left">
                <h1 class="Title">__</h1>
                <h2 class="Times">__</h2>
                <ul>
                    <li>
                        <span>主持：</span>
                        <div class="Host">__</div>
                    </li>
                    <li>
                        <span>日期：</span>
                        <div class="StartDate">__</div>
                    </li>
                    <li>
                        <span>时长：</span>
                        <div class="Duration">__</div>
                    </li>
                    <li>
                        <span>地址：</span>
                        <div class="Addr">__</div>
                    </li>
                    <li>
                        <span>其他：</span>
                        <div class="Desc">__</div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <p>离会议开始还有</p>
                <h1 class="CountDown">00:00:00</h1>
                <div class="clock">
                    <div class="memory">12</div>
                    <div class="memory">3</div>
                    <div class="memory">6</div>
                    <div class="memory">9</div>

                    <div class="needle" id="hours"></div>
                    <div class="needle" id="minutes"></div>
                    <div class="needle" id="seconds"></div>
                </div>
            </div>
        </div>
        <div id="detail" class="animated fadeInRight">
            <div class="left">
                <div class="mess">
                    <p>主持：<span class="Host">__</span></p>
                    <p>时间：<span class="Times">__</span></p>
                    <p>地址：<span class="Addr">__</span></p>
                </div>
                <div class="time">
                    离开会还有 <span class="CountDown"></span>
                </div>
                <div class="data">
                    <div>
                        已签到<p class="Checked-length">0</p>
                    </div>
                    <ul class="Checked"></ul>
                </div>
                <div class="data">
                    <div>
                        未签到<p class="UnCheck-length">0</p>
                    </div>
                    <ul class="UnCheck"></ul>
                </div>
                <div class="time">
                    空气质量 <span class="AirQuality"></span>
                </div>
            </div>
            <div class="right"></div>
        </div>
    </section>
    <footer>
        <div class="radio">__</div>
        <ul>
            <li class="active">
                <img src="http://iph.href.lu/50x50" alt="">
                <p>会议</p>
            </li>
            <li>
                <img src="http://iph.href.lu/50x50" alt="">
                <p>历史</p>
            </li>
            <li>
                <img src="http://iph.href.lu/50x50" alt="">
                <p>主题</p>
            </li>
            <li>
                <img src="http://iph.href.lu/50x50" alt="">
                <p>设置</p>
            </li>
        </ul>
        <div class="air">
            <div class="temperature">
                <p class="number Temperature">26</p>
                温度
            </div>
            <div class="humidity">
                <p class="number Humidity">75</p>
                湿度
            </div>
        </div>
    </footer>
</div>
<script src="js/js.js"></script>
<script>
    $(e=>{
        date();
        setInterval(date,1000);
        setTimeout(getData,1000)
    });

    //签到操作
    let setPerson=(obj,call,classname)=>{
        let el=`<div id="data-${obj.id}" class="person-box animated ${classname}"><div class="headimg" style="background-image: url(${obj.img})"></div><h1>${obj.name || '__'}</h1><p>欢迎参会</p><small>签到时间 ${obj.time || '00:00:00'}</small></div>`;
        call(el)
    };

    //时间展示
    let date=()=>{
        //补0
        let zero=v=>v<10?'0'+v:v;
        let week=['日','一','二','三','四','五','六'];
        //时间
        $('.Time').text(new Date().toTimeString().split(' ')[0] || '__');
        //日期
        $('.Date').text(`${new Date().getFullYear()}年${zero(new Date().getMonth()+1)}月${zero(new Date().getDate())}日 星期${week[new Date().getDay()]}`);
        //倒计时
        let s=(Date.parse(DATA.endTime || 0)-Date.parse(new Date()))/1000;
        $('.CountDown').text(s<=0?'00:00':`${zero(parseInt(s/3600))}:${zero(parseInt(s/60)%60)}:${zero(s%60)}`)
    };

    //时钟
    let clock=data=>{
        let updateTime = () => {
            let hour = data.dt.getHours();
            let minute = data.dt.getMinutes();
            let second = data.dt.getSeconds();

            data.hours.el.classList.add('moving');
            data.minutes.el.classList.add('moving');
            data.seconds.el.classList.add('moving');
            data.hours.val = hour == 0 && data.hours.val == 59 * 6 * 5 ? 360 : hour * 30;
            data.minutes.val = minute == 0 && data.minutes.val == 59 * 6 ? 360 : minute * 6;
            data.seconds.val = second == 0 && data.seconds.val == 59 * 6 ? 360 : second * 6;
            data.hours.el.style.transform = `translate(-50%, -100%) rotate(${data.hours.val}deg)`;
            data.minutes.el.style.transform = `translate(-50%, -100%) rotate(${data.minutes.val}deg)`;
            data.seconds.el.style.transform = `translate(-50%, -85%) rotate(${data.seconds.val}deg)`;
            data.dt.setSeconds(second + 1);
        };
        setInterval(updateTime, data.renderTime);
        updateTime();
        data.seconds.el.addEventListener('transitionend', () => {
            data.hours.el.classList.remove('moving');
            data.minutes.el.classList.remove('moving');
            data.seconds.el.classList.remove('moving');
            if (data.hours.val == 360) data.hours.el.style.transform = 'translate(-50%, -100%) rotate(0deg)';
            if (data.minutes.val == 360) data.minutes.el.style.transform = 'translate(-50%, -100%) rotate(0deg)';
            if (data.seconds.val == 360) data.seconds.el.style.transform = 'translate(-50%, -85%) rotate(0deg)';
        });
    };

    clock({
        dt: new Date(),//起始时间
        hours: {el:hours, val: 0},
        minutes: {el:minutes, val: 0},
        seconds: {el:seconds, val: 0},
        renderTime: 1000 //刷新频率
    });

    let getData=()=>{
        ajax('getPersonnelList',{},v=>{
            if(v.code==0){
                DATA.Checked=v.data.map(o=>IMAGE+o.samplePhoto+'&type=0');
                for(let name in DATA){
                    let x=DATA[name];
                    if(typeof x === 'string') $('.'+name).text(x || '__');
                    if(typeof x === 'object') {
                        let html='';
                        for(let i=0;i<x.length && i<3;i++){
                            html+=`<li style="background-image:url(${x[i]})"></li>`
                        }
                        //ul
                        $('.'+name).html(html);
                        //长度
                        $(`.${name}-length`).text(x.length)
                    }
                }
                let x=v.data[0];
                if(x && !document.getElementById('data-'+x.id)){
                    $('#detail .right').css('background-image',`url(${IMAGE+x.grabPhoto+'&type=1'})`);
                    setPerson({
                        id:x.id,
                        name:x.name,
                        time:x.updatedTime.split(' ')[1],
                        img:IMAGE+x.samplePhoto+'&type=0'
                    },el=>{
                        if($('.person-box').length>1) $('#detail .person-box').eq(0).remove();
                        $('#detail .right').append(el)
                    },'fadeInRight')
                }
            }
            setTimeout(getData,10000);
        })
    };
</script>
</body>
</html>
